<template>
    <div>

        <city-header></city-header>
        <city-search :cities="cities"></city-search>
        <city-list
            :cities="cities"
            :hot="hotCities"
            :letter="letter"
        >

        </city-list>
        <alphabet :cities="cities" @change="handlePhlChange"></alphabet>
    </div>
</template>

<script>
    import CityHeader from './components/CityHeader'
    import CitySearch from './components/Search'
    import CityList from './components/List'
    import Alphabet from './components/Alphabet'
    import axios from 'axios'

    export default {
        name: "City",
        components: {
            CityHeader, CitySearch,CityList,Alphabet
        },
        data:function () {
            return {
                cities:{},
                hotCities:[],
                letter:''
            }

        },
        methods:{
            getCityInfo() {
                axios.get('/api/city.json')
                    .then(this.getInfoSucc)
            },
            getInfoSucc(res){
                if (res.data.ret && res.data.data){
                    this.hotCities = res.data.data.hotCities;
                    this.cities = res.data.data.cities;
                    // console.log(this.hotCities);
                }
            },
            handlePhlChange:function (Ahl) {
                this.letter=Ahl;
            }
        },
        mounted(){
            this.getCityInfo()
        }
    }
</script>

<style scoped lang="stylus">

</style>
